<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>数据可视化</title>
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<!--头部-->
		<header>
			<h1>数据可视化Echarts</h1>
			<div class="showTime">
				<script>
					var t = null;
					t = setTimeout(time,1000);
					function time(){
						clearTimeout(t);//清楚定时器
						dt = new Date();
						var y = dt.getFullYear();
						var mt = dt.getMonth()+1;
						var day = dt.getDate();
						var h = dt.getHours();//获取时
						var m = dt.getMinutes();//获取分
						var s =dt.getSeconds();//获取秒
						document.querySelector(".showTime").innerHTML="当前时间："+y+"年"+mt+"月"+day+"日"+"-"+h+"时"+m+"分"+s+"秒";
						t = setTimeout(time,1000);//设置定时器，循环运行
						}
				</script>
			</div>
		</header>
		
		<!--页面主题-->
		<section class="mainbox">
			<div class="column">
				<div class="panel bar">
					<h2>柱形图-就业行业</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line">
					<h2>折线图-人员变化<a href="javascript:;">2020</a><a href="javascript:;">2021</a></h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie">
					<h2>饼形图-年龄分布</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
			</div>
			<div class="column">
				<!--中间顶部模块-->
				<div class="no">
					<div class="no-hd">
						<ul>
							<li>123456</li>
							<li>456789</li>
						</ul>
					</div>
					<div class="no-bd">
						<ul>
							<li>前端需求人数</li>
							<li>市场供应人数</li>
						</ul>
					</div>
				</div>
				<!--地图模块-->
				<div class="map">
					<div class="map1"></div>
					<div class="map2"></div>
					<div class="map3"></div>
					<div class="chart"></div>
				</div>
			</div>
			<div class="column">
				<div class="panel bar2">
					<h2>柱形图-技能掌握</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line2">
					<h2>折线图-播放量</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie2">
					<h2>饼形图-地区分布</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
			</div>
		</section>
		<script src="js/flexible.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery.js"></script>
		
		<script src="js/china.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>
